﻿@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>SuiDemo</title>
    <link href="~/Content/sm.css" rel="stylesheet" />
    <link href="~/Content/sm-extend.css" rel="stylesheet" />
    <script src="~/Scripts/zepto.js"></script>
</head>
<body>
    <div class="page-group">
        <div id="page-layout" class="page">
            <header class="bar bar-nav">
                <a class="button button-link button-nav pull-left back" href="/demos/form">
                    <span class="icon icon-left"></span>
                    返回
                </a>
                <h1 class="title">表单</h1>
            </header>
            <div class="content">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">Name</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="Your name">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">E-mail</div>
                                    <div class="item-input">
                                        <input type="email" placeholder="E-mail">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-password"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">Password</div>
                                    <div class="item-input">
                                        <input type="password" placeholder="Password" class="">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">Gender</div>
                                    <div class="item-input">
                                        <select>
                                            <option>Male</option>
                                            <option>Female</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- Date -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">Birth date</div>
                                    <div class="item-input">
                                        <input type="date" placeholder="Birth day" value="2014-04-30">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- Switch (Checkbox) -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">Switch</div>
                                    <div class="item-input">
                                        <label class="label-switch">
                                            <input type="checkbox">
                                            <div class="checkbox"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">Switch</div>
                                    <div class="item-input">
                                        <input type="text" id='city-picker' value="浙江 杭州 拱墅区" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">Textarea</div>
                                    <div class="item-input">
                                        <textarea id="fqewfq"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
                        <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $("#city-picker").cityPicker({
                    toolbarTemplate: '<header class="bar bar-nav">\
                        <button class="button button-link pull-right close-picker">确定</button>\
                        <h1 class="title">选择收货地址</h1>\
                        </header>'
                });

                $("#fqewfq").focus(function() {
                    $("#page-layout .content").css({ 'padding-bottom': '50%' });
                    $("#page-layout .content").scrollTop(10000, 300);
                });
                $("#fqewfq").blur(function () {
                    $("#page-layout .content").css({ 'padding-bottom': '' });
                });
            });
        </script>
    </div>
    <script src="~/Scripts/sm.js"></script>
    <script src="~/Scripts/sm-extend.js"></script>
    <script src="~/Scripts/sm-city-picker.js"></script>
</body>
</html>
